<template>
	<video src="https://aa-b.oss-cn-chengdu.aliyuncs.com/shipin/dtbj.mp4" 
	autoplay
	loop 
	class="bg-video" 
	object-fit="cover" 
	enable-progress-gesture="false"
	show-center-play-btn="false"></video>
	<view class="content">
		<!-- 头像 -->
		<view class="header">
			<view class="lv">10</view>
		</view>
		<!-- 开始游戏 -->
		<view class="start" @click="startGame" v-if="!matchingShow">
			开始逃离
		</view>
		<view class="start" @click="stopGame" v-else>
			行动取消
		</view>
		<!-- 排队匹配 -->
		<view class="queue-matching" v-show="matchingShow">
			{{matching}} 逃出五角大楼
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				matching:"00:01",
				matchingShow:false,
				gameInterval:null
			}
		},
		methods: {
			startGame(){
				this.matchingShow = true;
				this.startTime();
			},
			stopGame(){
				this.matchingShow = false;
				clearInterval(this.gameInterval);
			},
			startTime(){
				/* Minutes and seconds */
				var minutes = 0;
				var seconds = 0;
				this.gameInterval = setInterval(()=>{
					seconds ++;
					if(seconds == 60){
						seconds = 0;
						minutes ++;
					}
					let a,b;
					// 补0
					if(minutes<10){
						a = "0"+minutes;
					}else{
						a = minutes;
					}
					if(seconds<10){
						b = "0"+seconds;
					}else{
						b = seconds;
					}
					this.matching = a+":"+b;
				},1000);
			}
		}
	}
</script>

<style>
.bg-video{
	width: 100%;
	height: 100vh;
}
.content{
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 9999;
	left: 0px;
	top: 0px;
	color: #fff;
}
.header{
	width: 60px;
	height: 60px;
	position: relative;
	left: 10px;
	top: 10px;
	border: 1px solid #ccc;
}
.lv{
	width: calc(100% - 2px);
	height: 10px;
	position: absolute;
	bottom: 7px;
	right: 3px;
	text-align: right;
	font-size: 12px;
}
.start{
	width: 145px;
	height: 50px;
	position: relative;
	border: 1px solid #a1a1a1;
	top: calc(100% - 120px);
	left: calc(100% - 153px);
	text-align: center;
	line-height: 50px;
	color: #013821;
	background-color: #07bc71;
	font-weight: bold;
	font-size: 18px;
}
.queue-matching{
	width: 200px;
	height: 25px;
	position: absolute;
	background-color: rgba(1,56,33,0.7);
	left: calc((100% - 200px)/2);
	top: 20px;
	text-align: center;
}
</style>
